import React from 'react';
import { Form, Select, Card, Breadcrumb, Icon, Radio, Checkbox, Button, Row, Col, Rate } from 'antd';
import axios from '../../components/Engineering/axios'

const { Option, OptGroup } = Select;
const { Item: FormItem } = Form;


class KimRate extends React.Component {
  state = {
    value: 2
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({
        apple: !this.state.apple
      })
    }, 1000)
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },

      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      }
    }

    const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];

    return (
      <>
        <Card title="Rate 评分" style={{ marginTop: 10 }}>


          <FormItem layout="horizontal" labelAlign="left" label="1.基本、选中半星、只读">
            <Rate style={{ marginRight: 20 }} style={{ marginRight: 20 }} />
            <Rate allowHalf defaultValue={2.5} style={{ marginRight: 20 }} />
            <Rate disabled defaultValue={2} style={{ marginRight: 20 }} />
          </FormItem>

          <FormItem layout="horizontal" labelAlign="left" label="2.给评分组件加上文案展示">
            <Rate value={this.state.value} onChange={(value) => this.setState({ value })} /> <span>{desc[this.state.value]}</span>
          </FormItem>

          <FormItem layout="horizontal" labelAlign="left" label="3.可以将星星替换为其他字符，比如字母，数字，字体图标甚至中文">
            <Rate character={<Icon type="heart" />} allowHalf style={{ marginRight: 20 }} style={{ marginRight: 20 }} />
            <Rate character="A" allowHalf style={{ fontSize: 36 }} style={{ marginRight: 20 }} />
            <Rate character="好" allowHalf style={{ marginRight: 20 }} />
          </FormItem>

          <FormItem layout="horizontal" labelAlign="left" label="4.支持允许或者禁用清除">
            <Rate defaultValue={3} />
            <span className="ant-rate-text">allowClear: true</span>
            <br />
            <Rate allowClear={false} defaultValue={3} />
            <span className="ant-rate-text">allowClear: false</span>
          </FormItem>


        </Card>


      </>
    )

  }
}

export default Form.create({ name: 'KimRate' })(KimRate)


// API#
// 属性	                   说明	类型	默认值	版本
// allowClear	            是否允许再次点击后清除	boolean	true	3.1.0
// allowHalf	            是否允许半选	boolean	false	
// autoFocus	            自动获取焦点	boolean	false	
// character	            自定义字符	ReactNode	<Icon type="star" />	
// className	            自定义样式类名	string	-	
// count	                star总数	number	5	
// defaultValue	          默认值	number	0	
// disabled	              只读，无法进行交互	boolean	false	
// style	                自定义样式对象	object	-	
// tooltips	              自定义每项的提示信息	string[]	-	3.12.0
// value	                当前数，受控值	number	-	
// onBlur	                失去焦点时的回调	Function()	-	
// onChange	              选择时的回调	Function(value: number)	-	
// onFocus	              获取焦点时的回调	Function()	-	
// onHoverChange	        鼠标经过时数值变化的回调	Function(value: number)	-	
// onKeyDown	            按键回调	Function(event)	-	

// 方法#
// 名称	                  描述	版本
// blur()	                移除焦点	
// focus()	              获取焦点	
